<!--
 * @Date: 2024-09-12 09:41:11
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 柱状图
  数据格式：
 [
  ["chart","bar1","bar2","bar3"],
  ["Mon"，445，414，392]
  ["Tue"，232，345，789],
 ]
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__histogram" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
/******* echarts *********/
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  GridComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { isEmpty, isObject } from 'lodash-es';
echarts.use([
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  GridComponent,
  BarChart,
  CanvasRenderer
]);

defineOptions({
  name: 'LcChartHistogram'
});
const props = defineProps(chartProps);

const processData = (data, mapOptions) => {
  if (data.length) {
    let transformData = [];
    // 设置了映射字段 或者 数据里有name和value字段
    if (!isEmpty(mapOptions) || (isObject(data[0]) && data[0]['name'] && data[0]['value'])) {
      if ((mapOptions && mapOptions.type) || data[0]['type']) {
        const groupData = {};
        const dimensionGroup = {};
        data.forEach((item) => {
          //分组
          const groupType = item[mapOptions?.type || 'type'];
          groupData[groupType] = groupData[groupType] ?? [];
          groupData[groupType].push(item);
          // x轴
          const dimensionGroupType = item[mapOptions?.dimension || 'name'];
          dimensionGroup[dimensionGroupType] = dimensionGroup[dimensionGroupType] ?? [];
          dimensionGroup[dimensionGroupType].push(item);
        });

        const groupKeys = Object.keys(groupData);
        transformData.push(['histogram', ...Object.keys(groupData)]);
        Object.keys(dimensionGroup).forEach((dimension) => {
          let dimensionDataArray = new Array(groupKeys.length);
          dimensionGroup[dimension].forEach((item) => {
            dimensionDataArray[groupKeys.indexOf(item[mapOptions?.type || 'type'])] =
              item[mapOptions?.valueMap || 'value'];
          });
          transformData.push([dimension, ...dimensionDataArray]);
        });
      } else {
        transformData.push(['histogram', '']);
        Array.isArray(data) &&
          data.forEach((item) => {
            transformData.push([
              item[mapOptions?.dimension || 'name'],
              item[mapOptions?.valueMap || 'value']
            ]);
          });
      }
    } else {
      // echarts dataset格式也是可以解析的
      transformData = data;
    }
    return transformData;
  } else {
    return [];
  }
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  if (processedData.length > 0) {
    const series =
      processedData[0].length < 3
        ? [options.series[0]]
        : processedData[0].length > options.series.length
          ? options.series.concat(
              new Array(processedData[0].length - options.series.length - 1).fill(options.series[0])
            )
          : options.series.slice(0, processedData[0].length);
    // 没有分组信息时，不需要显示legend
    series.length < 2 && delete options.legend;
    options.series = series;
  }
  return Object.assign({}, options, {
    dataset: {
      source: processedData
    }
  });
});
</script>
